<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {
  ref,
  defineProps,
  onMounted,
  onUnmounted,
  inject,
  shallowRef,
  defineExpose
} from 'vue'
import {
  pxToRem
} from "@/utils/index";


const props = defineProps({
  barData: {
    type: Object,
    default: () => ({})
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    console.log(props?.barData?.legendData)
    myChart.value = echarts.init(echartDom.value);
    let option = {
      barMaxWidth: pxToRem(11 * props?.dialogData?.fontSizeTimes),
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '0',
        top: '20%',
        containLabel: true
      },
      legend: {
        x: 'center',
        icon: 'rect',
        itemWidth: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        itemHeight: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        textStyle: {
          color: 'white',
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
        },
        data: props?.barData?.legendData
      },
      xAxis: {
        type: 'category',
        data: props?.barData?.xAxisData,
        axisLabel: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          fontWeight: 'lighter',
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
      },
      dataZoom: [
        {
          type: 'slider', // 设置为滑动条类型
          xAxisIndex: 0, // 关联到 x 轴
          start: 0, // 初始化时的开始位置
          end: pxToRem(100 * props?.dialogData?.fontSizeTimes), // 初始化时的结束位置
          height: pxToRem(20 * props?.dialogData?.fontSizeTimes), // 调整组件高度
          bottom: pxToRem(10 * props?.dialogData?.fontSizeTimes), // 设置组件位置在底部
        }
      ],
      yAxis: [
        {

          position: 'left',
          name: '套数',
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            padding: [0, 0, 0, pxToRem(-30 * props?.dialogData?.fontSizeTimes)]
          },
          nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 30), // 设置名称与轴线之间的距离
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            color: 'white'
          }
        }, {
          position: 'right',
          name: '增长率',
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            padding: [0, 0, 0, pxToRem(20 * props?.dialogData?.fontSizeTimes)]
          },
          nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 30), // 设置名称与轴线之间的距离
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            color: 'white',
            formatter: '{value} %'
          }

        }

      ],
      series: [{
        data: props?.barData?.barData,
        type: 'bar',
        stack: '销售套数',
        name: '销售套数',
        itemStyle: {
          color: '#E65992',
          borderRadius: 4
        },
        yAxisIndex: 0 // 对应第一个 Y 轴
      },
        {
          data: props?.barData?.lineData[0],
          type: 'line',
          stack: '同比增长率',
          name: '同比增长率',
          showSymbol: false,
          smooth: true,
          itemStyle: {
            color: '#0E81FF'
          },
          yAxisIndex: 1 // 对应第二个 Y 轴
        },
        {
          data: props?.barData?.lineData[1],
          type: 'line',
          stack: '环比增长率',
          name: '环比增长率',
          showSymbol: false,
          smooth: true,
          itemStyle: {
            color: '#F8F364'
          },
          yAxisIndex: 1 // 对应第二个 Y 轴
        }
      ]
    };
    option && myChart.value.setOption(option, true);
  }

}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>
<style scoped lang="less">
.h167 {
  height: 167px;
}

.dialog-h167 {
  width: 1120px;
  height: 500px;
}
</style>